<template>
	<h1 class="headers">{{ msg }}</h1>
	<div>{{ $store.state.count }}</div>
	<h2>{{ $store.state.use.number }}</h2>
	<el-button type="warning" @click="$store.commit('increment')">{{ 'store' }} </el-button>
	<el-button type="danger" @click="$store.commit('use/add')">{{ 'use' }}</el-button>
	<el-button type="success" @click="$store.dispatch('sub')">dispatch </el-button>
	<el-button type="primary" @click="$router.push('/index')">{{ count }}</el-button>
	<el-tag>{{ max }}</el-tag>
</template>

<script lang="ts">
	/* 总结一句话,和react越来越像,通过回调函数的形式来做各种操作 */
	import { useRouter } from 'vue-router'
	import { useStore } from 'vuex'
	import { defineComponent, reactive, toRefs, watchEffect, watch, computed, onMounted, onBeforeMount } from 'vue'
	export default {
		name: 'HelloWorld',
		props: {
			msg: {
				type: String,
				required: true,
			},
		},
		setup: () => {
			/* 获取router实例 */
			const router = useRouter()
			/* 获取store */
			const store = useStore()
			// console.log(store.state)
			/* 声明响应式数据 */
			const data = reactive({
				count: 1,
				add() {
					data.count += 1
				},
			})
			onBeforeMount(() => {
				console.log(document.querySelector('.headers'))
			})
			onMounted(() => {
				console.log(document.querySelector('.headers'))
			})
			/* 监听某一个数据 */
			watch(
				() => data.count,
				(count, pre) => {
					console.log(count, pre)
				}
			)
			/* 监听所有的数据 */
			watchEffect(() => console.log(data.count))
			/* computed计算属性  */
			return {
				max: computed(() => store.state.count),
				/* torefs是可以把reactive声明的响应式对象解构出来,使得模板可以直接访问 */
				...toRefs(data),
			}
		},
	}
</script>

<style scoped lang="less">
	h1 {
		background-color: pink;
	}
	a {
		color: #42b983;
	}

	label {
		margin: 0 0.5em;
		font-weight: bold;
	}

	code {
		background-color: #eee;
		padding: 2px 4px;
		border-radius: 4px;
		color: #304455;
	}
</style>
